<template>
  <div class="pages-search">
    <MyForm :formConfigure="formConfig" v-model="formData">
      <template #footer>
        <div class="footer">
          <el-button @click="handResetClick">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
          <el-button @click="handSearchClick">
            <el-icon><Search /></el-icon>搜索
          </el-button>
        </div>
      </template>
    </MyForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import MyForm from '@/base-ui/index'
import bus from '@/utils/bus'
export default defineComponent({
  props: {
    formConfig: {
      type: Array,
      required: true
    }
  },
  name: 'pages-search',
  components: {
    MyForm
  },
  setup(prop) {
    //该属性应由配置文件决定
    const formList = prop.formConfig ?? []
    const originalForm: any = {}
    formList.forEach((item: any) => {
      originalForm[item?.field] = ''
    })
    const formData = ref(originalForm)
    //点击重置
    const handResetClick = () => {
      for (const argumentsKey in formData.value) {
        formData.value[`${argumentsKey}`] = originalForm[`${argumentsKey}`]
      }
      bus.emit('resetTable')
    }
    //点击搜索
    const handSearchClick = () => {
      bus.emit('searchTable', formData.value)
    }
    return {
      formData,
      handResetClick,
      handSearchClick
    }
  }
})
</script>

<style lang="less" scoped>
.footer {
  padding: 20px;
  text-align: right;
  .el-icon {
    padding-right: 5px;
  }
}
</style>
